<template>
    <div>
        <div class="admin-top">
            <div class="admin-top-sousou">
                <span>
                    <el-icon>
                        <Search />
                    </el-icon>
                    筛选搜索
                </span>
                <div>
                    <el-button>重置</el-button>
                    <el-button type="primary" @click="onSearch">查询搜索</el-button>
                </div>
            </div>
            <div class="admin-bom">
                <div>
                    <span>
                        输入搜索:
                    </span>
                    <el-input type="text" placeholder="请输入" v-model="name"></el-input>
                </div>
                <div>
                    <span>
                        商品货号:
                    </span>
                    <el-input type="text" placeholder="请输入货号" v-model="usname"></el-input>
                </div>
                <div>
                    <span>
                        商品分类:
                    </span>
                    <el-select v-model="classific" class="m-2" placeholder="Select" size="large">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div>
                    <span>
                        商品品牌:
                    </span>
                    <el-select v-model="brand" class="m-2" placeholder="Select" size="large">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div>
                    <span>
                        上架状态:
                    </span>
                    <el-select v-model="TheShelf" class="m-2" placeholder="Select" size="large">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div>
                    <span>
                        审核状态:
                    </span>
                    <el-select v-model="Examine" class="m-2" placeholder="Select" size="large">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>
        </div>
        <div class="admim-nav">
            <div>
                <el-icon>
                    <Tickets />
                </el-icon>
                <span>
                    数据列表
                </span>
            </div>
            <div>
                <el-button type="primary" @click="address('add')">添加</el-button>
            </div>
        </div>
        <div class="admin-foter">
            <el-table :data="tableData" style="width: 100%;" border>
                <el-table-column type="selection" width="60" />
                <el-table-column prop="id" label="编号" width="100" />
                <el-table-column label="商品图片" width="160">
                    <template #default="scope">
                        <img :src="scope.row.pic" style="width: 100px;" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="商品名称" width="100">
                    <template #default="scope">
                        {{ scope.row.name }}
                        <div>
                            品牌:{{
                                scope.row.brandName
                            }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="价格/货号" width="130">
                    <template #default="scope">
                        <div>
                            价钱:￥{{ scope.row.price }}
                        </div>
                        货号:
                    </template>
                </el-table-column>
                <el-table-column label="标签" width="140">
                    <template #default="scope">
                        <div> 上架: <el-switch @click="publishStatus(scope.row)"
                                :value="scope.row.publishStatus === 1 ? true : false" /></div>
                        <div>新品: <el-switch @click="newStatus(scope.row)"
                                :value="scope.row.newStatus === 1 ? true : false" /></div>
                        <div>推荐: <el-switch @click="recommandStatus(scope.row)"
                                :value="scope.row.recommandStatus === 1 ? true : false" /></div>

                    </template>
                </el-table-column>>
                <el-table-column prop="sort" label="排序" width="100">
                </el-table-column>
                <el-table-column prop="address" label="SKU库存" width="100">
                    <el-button type="primary" :icon="EditPen" circle />
                </el-table-column>
                <el-table-column prop="stock" label="销量" width="100">
                </el-table-column>
                <el-table-column prop="address" label="审核状态" width="100">
                    审核状态
                    <el-button link @click="address('fenpei')">审核详情</el-button>

                </el-table-column>
                <el-table-column prop="address" label="操作" width="160">
                    <el-button @click="chage('add')">编辑</el-button>
                    <el-button type="danger" @click="address('fenpei')">删除</el-button>

                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
                :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search, Tickets, EditPen } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import * as api from '../../request/api'
import dayjs from 'dayjs'
import useTable from '../../hooks/useTables'
import { ElMessage, ElMessageBox } from 'element-plus'
//下拉框
const classific = ref('请选择')
const brand = ref('请选择品牌')
const TheShelf = ref('全部')
const Examine = ref('全部')
//下拉框数据
const options = [
    {
        value: 1,
        label: '新品'
    },
    {
        value: 2,
        label: '推荐'
    },
    {
        value: 3,
        label: '上架'
    },
    {
        value: 4,
        label: '下架'
    }
]
//搜索绑定
let name = ref("")
let usname = ref("")
//弹出层显示
const visible = ref(false)
const change = ref('a')
//分配提示
const getValuefn = (e: any) => {
    // console.log(e)
    visible.value = e
}
//添加
const address = (val: any) => {
    // console.log(val);
    change.value = val
    visible.value = true

}
//编辑
const chage = (val: any) => {
    change.value = val
    visible.value = true
}
//数据请求展示
let { tableData, getTableData, pagination } = useTable(api.product.getProductList, {
    keyword: name,
    product: usname
})
//分页
getTableData()
const handleSizeChange = (val: number) => {
    getTableData()
    // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    getTableData()
    // console.log(`current page: ${val}`)
}

let onSearch = async () => {
    getTableData()
}
//上线
let publishStatus = async (row: any) => {
    ElMessageBox.confirm(
        '是否要修改该状态?', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // console.log(row);
            // console.log(row.id);
            // console.log(row.status);
            let query = reactive({
                id: row.id,
                status: row.publishStatus === 1 ? 0 : 1
            })
            // console.log(query1);

            let newQuery = JSON.parse(JSON.stringify(query))
            console.log(newQuery);

            await api.product.productUpload(newQuery)
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
            getTableData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}
//新品
let newStatus = async (row: any) => {
    ElMessageBox.confirm(
        '是否要修改该状态?', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // console.log(row);
            // console.log(row.id);
            // console.log(row.status);
            let query = reactive({
                id: row.id,
                status: row.newStatus === 1 ? 0 : 1
            })
            // console.log(query1);

            let newQuery = JSON.parse(JSON.stringify(query))
            console.log(newQuery);

            await api.product.postnewStatus(newQuery)
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
            getTableData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}
//推荐
let recommandStatus = async (row: any) => {
    ElMessageBox.confirm(
        '是否要修改该状态?', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // console.log(row);
            // console.log(row.id);
            // console.log(row.status);
            let query = reactive({
                id: row.id,
                status: row.recommandStatus === 1 ? 0 : 1
            })
            // console.log(query1);

            let newQuery = JSON.parse(JSON.stringify(query))
            console.log(newQuery);

            await api.product.postrecommandStatus(newQuery)
            ElMessage({
                type: 'success',
                message: '操作成功',
            })
            getTableData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消提交',
            })
        })
}
</script>

<style lang="scss" scoped>
.admin-top {
    width: 96%;
    height: 150px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-top: 60px;
    margin-bottom: 20px;

    .admin-top-sousou {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            .el-icon {
                padding-right: 10px;
            }
        }

        .el-button {
            margin-left: 20px;
        }

    }

}

.admin-bom {
    padding-left: 50px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    div {
        width: 30%;
        margin: 5px;

        .el-input {
            width: 200px;
        }

        :deep.el-select {
            width: 58%;

        }
    }




}

.admim-nav {
    width: 96%;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    .example-pagination-block {
        margin-top: 10px;
        float: right;
    }

}

.admin-foter {
    margin-top: 20px;



}

.el-table-column {
    .img {
        width: 100px;
    }
}
</style>  